<template>
    <div class="page-wrap" v-loading="loading">
        <div class="page-header-wrap" v-if="detailData.id">
            <a-page-header @back="handleBack">
                <template #subTitle>
                    <flexbox justify="space-between">
                        <flexbox>
                            <span style="color: #000; font-size: 20px; font-weight: bold">
                                {{ detailData.pmpProductDetailDTO?.systemName }}
                            </span>
                            <a-tag color="cyan" style="margin-left: 12px">{{
                                detailData.pmpProductDetailDTO.catalogType === '1' ? '产品' : '子产品'
                            }}</a-tag>
                        </flexbox>

                        <flexbox v-if="$filters.systemProductTypeFilter(detailData.pmpProductDetailDTO.productType)">
                            <a-tag
                                :color="getRandomColor(index)"
                                v-for="(item, index) of $filters.systemProductTypeFilter(detailData.pmpProductDetailDTO.productType).split(',')"
                                :key="item"
                            >
                                {{ item }}
                            </a-tag>
                        </flexbox>
                    </flexbox>
                </template>
                <div style="width: calc(100% - 130px)">
                    <a-form layout="inline">
                        <a-row>
                            <a-col :span="5">
                                <a-form-item label="管理平台" :span="24">
                                    <span>{{ detailData.pmpProductDetailDTO?.isOutsideSystem === '0' ? '技术中台' : 'JIRA' }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="发版周期" :span="24">
                                    <span>
                                        {{
                                            detailData.pmpProductDetailDTO?.releasePeriodAvgWeeks
                                                ? `${detailData.pmpProductDetailDTO?.releasePeriodAvgWeeks}周`
                                                : '不固定'
                                        }}</span
                                    >
                                </a-form-item>
                            </a-col>
                            <a-col :span="6">
                                <a-form-item label="统计颗粒度" :span="24">
                                    <span> {{ detailData.pmpProductDetailDTO?.isOutsideSystem === '0' ? '预发布版本' : '需求【jira-issue】' }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="8">
                                <a-form-item label="全生命周期管理阶段" :span="24">
                                    {{ detailData.pmpProductDetailDTO?.isOutsideSystem === '0' ? '全生命周期' : '需求研发、需求测试' }}
                                </a-form-item>
                            </a-col>

                            <a-col :span="5">
                                <a-form-item
                                    :label="detailData.pmpProductDetailDTO?.isOutsideSystem === '0' ? '需求交付周期' : '研发交付周期'"
                                    :span="24"
                                >
                                    <span v-if="detailData.onlineAvgDays">{{ detailData.onlineAvgDays }}</span>
                                    <MinusOutlined style="font-size: 15px" v-else />
                                </a-form-item>
                            </a-col>
                            <a-col :span="5">
                                <a-form-item label="缺陷率" :span="24">
                                    <span v-if="detailData.faultRate">
                                        {{ detailData.faultRate }}
                                    </span>
                                    <MinusOutlined style="font-size: 15px" v-else />
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="统计周期" :span="24">
                                    <span
                                        >{{ $moment(route.query.startTime).format('YYYY-MM-DD') }}~{{
                                            $moment(route.query.endTime).format('YYYY-MM-DD')
                                        }}</span
                                    >
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
            </a-page-header>
            <img src="@/assets/images/beijixing/beijixing-detail.png" style="width: 130px; height: 100%; position: absolute; top: 0px; right: 0" />
        </div>

        <div style="background: #fff">
            <component :is="currCompName" :detail="detailData" v-if="detailData.id" />
        </div>
    </div>
</template>

<script lang="ts">
import uuid from 'node-uuid';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { MinusOutlined } from '@ant-design/icons-vue';
import api from '@/api';
import JiraDetail from './JiraDetail/index.vue';
import WaicaiDetail from './WaicaiDetail/index.vue';
import ZiyanDetail from './ZiyanDetail/index.vue';
import JiaofuZhiliang from './JiaofuZhiliang/index.vue';
import { defineComponent, reactive, toRefs, computed } from 'vue';
interface State {
    detailData: any;
    loading: boolean;
}
export default defineComponent({
    name: 'BeijixingDetail',
    components: {
        JiraDetail,
        WaicaiDetail,
        ZiyanDetail,
        JiaofuZhiliang,
        MinusOutlined
    },
    setup() {
        const { route, handleBack } = useRouterApi({
            backQuery: {
                path: 'energyManage/beijixing'
            }
        });
        const state = reactive<State>({
            detailData: {},
            loading: true
        });
        const currCompName = computed(() => {
            const { isOutsideSystem, systemType, type } = route.query;
            if (type === '1') {
                if (isOutsideSystem === '0') {
                    return systemType === '2' ? 'ZiyanDetail' : 'WaicaiDetail';
                } else {
                    return 'JiraDetail';
                }
            } else {
                return 'JiaofuZhiliang';
            }
        });
        const getRandomColor = (index) => {
            const num = index % 3;
            switch (num) {
                case 0:
                    return 'green';
                case 1:
                    return 'blue';
                case 2:
                    return 'orange';
                default:
                    return 'green';
            }
        };
        const getDetailData = async () => {
            state.loading = true;
            const { ...query } = route.query;
            const { success, moule } = await api.portalControlModel.getPolarisIndexInfo(query);
            if (success) {
                state.detailData = { ...state.detailData, id: uuid.v4(), ...moule };
            }
            state.loading = false;
        };
        const getInfo = async () => {
            const { ...query } = route.query;
            const { success, moule } = await api.portalControlModel.getQualityInfo(query);
            if (success) {
                state.detailData = {
                    ...state.detailData,
                    faultRate: moule.faultRate
                };
            }
        };
        getInfo();
        getDetailData();
        return {
            currCompName,
            ...toRefs(state),
            route,
            handleBack,
            getRandomColor
        };
    }
});
</script>

<style scoped lang="less">
::v-deep(.ant-page-header-heading-left) {
    width: 100% !important;
    padding-right: 130px;
}
::v-deep(.ant-page-header-heading-sub-title) {
    width: 100% !important;
}
.page-wrap {
    position: relative;
    height: 100%;
    .page-header-wrap {
        background: #fff;
        position: sticky;
        top: 0;
        z-index: 9;
        border-bottom: 1px solid #f1f1f1;
        border-top: 1px solid #f1f1f1;
        margin-bottom: 24px;
        &::before {
            content: '';
            position: absolute;
            width: 6px;
            height: 100%;
            background: #3094e9;
            top: 0;
            left: 0;
            z-index: 1;
        }
        .extra-wrap {
            position: absolute;
            right: 40px;
            bottom: 22px;
            color: #000;
            cursor: pointer;
        }
    }
}
</style>
